<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<view class="wrapper">
			<view class="left-top-sign">任务app</view>
			<view class="welcome">{{zcmsg}}</view>
			<view class="input-content">
				<view class="input-item" style="position: relative">
					<text class="tit">手机号码</text>
					<input type="number"  v-model="inputValue" :disabled="codedsb" placeholder="请输入手机号码" maxlength="11" data-key="mobile" />
					<button type="primary" :disabled="codedsb" :style="{'color':codedsb?'#ff1919':'#E17503'}" class="ymmm u-f u-f-ac"  @tap="getCheckNum">{{!codetime?'获取验证码':codetime+' s'}}</button>
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<input type="number" v-model="code" placeholder="6位数字验证码" placeholder-class="input-empty" maxlength="6" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="text" value="" placeholder="6-20位不含特殊字符的数字、字母" placeholder-class="input-empty" maxlength="20"
					 password data-key="password"  v-model="pswd" />
				</view>
			
			</view>
			<button class="confirm-btn" :style="{'background':disabled?'#ddd':'#E17503'}" :disabled="disabled" @tap="onzcTap()" >同意协议并注册</button>

		</view>

		<view class="footerbox">
			<checkbox></checkbox>*已阅并同意<text @click="xieyi">《用户协议》</text> <text @click="xieyi1">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				inputValue: '',
				code: '',
				pswd: '',
				codedsb:false,
				disabled:true,
				codetime:0,
				zcmsg:"欢迎回来！",
				openid:'',
				pid:'',
				nickName:'',
				avatarUrl:'',
			}
		},
		watch:{
			inputValue(val){
				this.OnBtnChange();
			},
			code(val){
				this.OnBtnChange();
			},
			pswd(val){
				this.OnBtnChange();
			}
		},
		onLoad(event) {
			console.log(event)
			if(event.openId){

				this.openid=event.openId
				this.nickName=event.nickName
				this.avatarUrl=event.avatarUrl
				this.zcmsg="绑定账号！"
			}
		},
		methods: {
			...mapMutations(['login']),
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[3456789]\d{9}$/; 
				return mPattern.test(this.inputValue);
			},
			xieyi(){
			uni.navigateTo({
			url:"/pages/xieyi/xieyi"	
			})	
			},
			xieyi1(){
			uni.navigateTo({
			url:"/pages/xieyi1/xieyi1"	
			})		
			},
			// 改变按钮状态
			OnBtnChange(){
				if( this.inputValue.length>6 && this.code>=1){
					this.disabled=false; return;
				}else{
					this.disabled=true;
				}
				
			},
			async onzcTap(){
				let yzm = this.code;
				let pswd = this.pswd;
				let yzmss = uni.getStorageSync('yzmss');
				console.log(yzmss)
				console.log(yzm)
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码',icon:"none" });
				}else if(!yzm){
					uni.showToast({ title: '验证码不能为空',icon:"none" });
					return false;
				}else if(!yzm.length){
					uni.showToast({ title: '输入验证码',icon:"none" });
					return false;
				}else if(yzm*1!=yzmss*1){
					uni.showToast({ title: '短信验证码错误',icon:"none" });
					return false;
				}else if(!pswd){
					uni.showToast({ title: '密码不能为空',icon:"none" });
					return false;
				}else if(pswd.length <= 5 || pswd.length > 20){
					uni.showToast({ title: '密码长度6-20位',icon:"none" });
					return false;
				}
				this.zc();
			},
			async zc(){
				let _this=this;
				let data = {'mobile':this.inputValue,'username':this.inputValue,'password':this.pswd,'pid':this.pid};
				if(this.openid){
					data.openid=this.openid
					data.nickName=this.nickName
					data.avatarUrl=this.avatarUrl
				}
		var that=this;
		//this.ongrzlTap();
		uni.request({
			url: that.$serverUrl + '/index.php/Mobile/index/reg',
			data:data,
			success: (ret) => {
				console.log(ret.data.status)
				//console.log('data', ret);
				if (ret.data.status !=200) {
					this.$api.msg('注册失败');
					this.logining = false;
				} else {
			uni.showModal({
				title: '',
				content:'注册成功',
				showCancel: false,
				confirmText: "确定",
				success: function (res) {
					if (res.confirm) {
						_this.navBack();
					} else if (res.cancel) {
						
					}
				}
			});
				}
			}
		});		
			/**	let [err,res] =await this.$http.post('/api/user/reg',data);
				if (!this.$http.errorCheck(err,res)) return;
				
				if(res.data.code === 1){
					uni.showModal({
						title: '',
						content: res.data.msg,
						showCancel: false,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								_this.navBack();
							} else if (res.cancel) {
								
							}
						}
					});
				}else{
					this.$api.msg(res.data.msg);
					this.logining = false;
				}**/
			},
			async getCheckNum(){
				console.log(this.isPhone())
				console.log(this.codetime)
				if(this.codetime > 0) return;
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码',icon:"none" });
				}
				// 请求服务器，发送验证码
				var data ={'phone':this.inputValue}
				//let [err,res] =await this.$http.post('/api/ems/index',data);
				//if (!this.$http.errorCheck(err,res)) return;
				var that=this;
				//this.ongrzlTap();
				uni.request({
					url: that.$serverUrl + '/index.php/Mobile/index/faduanxin',
					data:data,
					success: (ret) => {
						console.log(ret.data.status)
						//console.log('data', ret);
						if (ret.data.status !=200) {
							that.$api.msg('发短信失败');
							that.codedsb = false;
						} else {
				
					uni.setStorage({//缓存配置信息
						key: 'yzmss',  
						data: ret.data.code
					})
					that.$api.msg('发短信成功');
					//this.$api.msg(res.data.msg);
			
				
				// 发送成功，开启倒计时
				that.codetime=60;
				that.codedsb=true;
				let timer=setInterval(()=>{
					that.codetime--;
					if(that.codetime < 1){
						clearInterval(timer);
						that.codetime=0;
						that.codedsb=false;
					}
				},1000);
						}
					}
				});
			
			},
			navBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.container {
		padding-top: 20px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}
	.ymmm{
		position: absolute;
		right: 0upx;
		top: 0upx;
		height: 60px;
		padding-bottom: 50upx;
		color: #F17503;
		padding-right: 30upx;
		font-size: 28upx;
		border: 0upx!important;
		background: transparent!important;
	}
	.ymmm:after{
		border: none;
	}
	.titleb {
		margin-top: 30px;
		width: 100%;
		height: 10upx;
		position: relative;
	}

	.titleb text {
		width: 140px;
		text-align: center;
		position: absolute;
		font-size: 28upx;
		color: #999;
		left: 50%;
		margin-left: -70px;
		background: #fff;
		z-index: 2;
	}

	.titleb:after {
		position: absolute;
		left: 20upx;
		right: 20upx;
		content: '';
		width: auto;
		height: 1upx;
		background: #ddd;
		z-index: 1;
	}

	.dlg {
		margin-top: 20px;
	}

	.dlg>view {
		margin: 0 20upx;
	}

	.dlg>view>view {
		color: #999;
	}

	.dlg>view image {
		width: 104upx;
		height: 104upx;
		border-radius: 50%;
		display: block;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: 10upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: '';
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -350upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 40upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: rgb(209, 99, 45);
		background: -webkit-linear-gradient(left top, #f5b052, #d1632d);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom right, #f5b052, #d1632d);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom right, #f5b052, #d1632d);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom right, #f5b052, #d1632d);
		/* 标准的语法（必须放在最后） */
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.dsfdlbox {
		position: absolute;
		left: 0;
		bottom: 70upx;
		width: 100%;
	}

	.footerbox {
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 40upx;
		width: 100%;
		font-size: 26upx;
		color: #666;
	}

	.footerbox text {
		color: #0077CC;
	}
</style>
